﻿<html>
<head>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
    <link href="jquery-ui-1.8.custom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $('#btn1').click(function () {
                $('<div>这是被添加的div</br>换个行</div>').appendTo('#container1');
            });
            $('#btn2').click(function () {
                $('<span>这是被添加的div</br>换个行</span>').appendTo('#container1');
            });
            $('#btn3').click(function () {
                $('#container1').html('');
            });

            $('#menu dt').click(function () {
                $(this).next().toggle();
            });

            $('#btnShowWindow').click(function () {
                $('#container2').dialog(
                    {
                        modal: true,
                        title: '选择团队人员',
                        buttons: { "确定": function () {
                            $(this).dialog("close");
                        }
                        }
                    });

            });
        });
    </script>
</head>
<body>
    <div id="layout_root">
        <div style="width: 400px;">
            <h1>
                h1标题</h1>
            <h2>
                h2标题</h2>
            <h3>
                h3标题</h3>
            <div class="sec">
                分割显示第一条</div>
            <div class="sec">
                分割显示第二条</div>
            <div class="sec">
                分割显示第三条</div>
            <div id="container1">
            </div>
            <input id="btn1" type="button" value="添加一个div" />
            <input id="btn2" type="button" value="添加一个span" />
            <input id="btn3" type="button" value="添加一个a" />
            <div id="container2">
            </div>
            <dl id="menu">
                <dt>标题标题 </dt>
                <dd>
                    很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</br>多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</br>多很多内容很多很多内容很多很多内容很多很多内容很多很多内容很多很多内容</br></dd>
            </dl>
            <input id="btnShowWindow" type="button" value="点这儿弹个对话框" />
        </div>
    </div>
</body>
</html>
